<template>
  <m-layout>
    <mt-header slot="header" title="身体数据">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <div class="small weak">以下是{{$route.query.studentName}}的最新身体数据</div>
      <m-section v-if="bodyDataList.length>0">
        <mt-cell class="body-data-item"
                 v-for="item in bodyDataList"
                 :key="item.bodyDataCategoryVO.id"
                 :title="item.bodyDataCategoryVO.categoryName"
                 :to="{ name: 'bodyDataDetail',
                        query: {studentId: $route.query.studentId, categoryId: item.bodyDataCategoryVO.categoryId}
                 }"
                 is-link>
          <span>{{item.bodyData.dataValue}}{{item.bodyDataCategoryVO.unitName}}</span>
          <img slot="icon" :src="`/static/images/icon/${item.bodyDataCategoryVO.iconUrl}`" width="22" height="22">
        </mt-cell>
      </m-section>
      <e-placeholder v-else/>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      bodyDataList: state => state.smartCourse.bodyDataList
    })
  },
  data () {
    return {
    }
  },
  mounted () {
    this.$store.dispatch('smartCourse/studentBodyDataLatest', {
      studentId: this.$route.query.studentId
    })
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.small{
  padding: 0.4rem 0 0 0.3rem;
}
</style>
